.notification-center {
  > .notification {
    @include notification_container();
    position: relative;

    > .material-icons {
      font-size: rem(24px);
      line-height: rem(22px);
      vertical-align: middle;
    }

    > .count {
      @include notification_counter();

      &.hide {
        display: none;
      }
    }
  }

  > .notification::after {
    display: none;
  }

  .dropdown-menu {
    margin: 0;
    padding: 0;
    border-radius: 0;
    min-width: rem(400px);
  }

  .notifications {
    font-size: $font-size-sm;

    .nav {
      .nav-item {
        margin-left: 0;
        width: 33%;
        text-align: center;
      }

      .nav-link {
        color: $font-color-secondary;
        font-weight: $font-weight-normal;
        padding: rem(15px) rem(15px) rem(10px) rem(15px);

        &.active {
          border-top: 0;
          border-bottom: 2px solid $nav-tabs-active-link-hover-border-color;
          color: $font-color-primary;
        }

        &:hover {
          color: $link-color;
        }
      }
    }

    .tab-content {
      border-top: rem(2px) solid $navbar-bottom-separtor-color;
      padding: 0;
      margin-top: rem(-1px);

      > .tab-pane {
        height: rem(190px);
        overflow-y: auto;

        .no-notification {
          display: none;
        }

        &.empty {
          color: $gray-medium;
          text-align: center;

          &::after {
            content: "\E7F5";
            font-family: "Material Icons";
            opacity: 0.7;
            font-size: rem(90px);
            color: $gray-light;
          }

          > .no-notification {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: block;
            .mobile & {
              bottom: rem(50px);
            }
          }
        }
      }

      .notif {
        display: block;
        padding: rem(10px) rem(15px);
        color: $font-color-secondary;

        .material-icons {
          vertical-align: top;
        }

        .message-notification-status {
          &.open {
            color: $brand-success;
          }

          &.closed {
            color: $brand-danger;
          }

          &.pending1, &.pending2 {
            color: $brand-secondary;
          }
        }

        strong {
          color: $font-color-primary;
        }

        &:hover {
          background-color: $dropdown-link-hover-bg;
          color: $dropdown-link-hover-color;
          text-decoration: none;

          strong {
            color: $dropdown-link-hover-color;
          }
        }
      }
    }
  }
  .mobile & {
    .nav-link::before {
      font-family: 'Material Icons';
      display: block;
      font-size: 30px;
      color: $gray-dark;
    }
    #orders-tab::before {
      content: "\E8CB";
    }
    #customers-tab::before {
      content: "\E7FE";
    }
    #messages-tab::before {
      content: "\E0BE";
    }
    .no-notification {
      top: rem(220px);
    }
  }
}
